<template>
   <div style="display:flex">
      <div @click="switchCom(item,index)" :class="[active == index ? 'active':'']" class="tabs" v-for="(item, index) in dataCom">
        {{ item.name }}
      </div>
   </div>
   <component :is="comId"></component>

</template>

<script setup lang='ts'>
import {ref ,reactive} from 'vue'
// import TreeVue from './components/Tree.vue'
import AVue from './components/A.vue'
import BVue from './components/B.vue'
import CVue from './components/C.vue'
interface Tree{
  name:string,
  checked:boolean,
  children?:Tree[]
}
const comId = ref(AVue);
const active = ref(0);
const dataCom = reactive([
  {
    name:"A",
    com:AVue
  },
  {
    name:"B",
    com:BVue
  },
  {
    name:"C",
    com:CVue
  },
])
const switchCom = (item: any,index:number)=>{
comId.value = item.com
active.value = index
}
const data= reactive<Tree[]>([
  {
    name:'1',
    checked:false,
    children:[
      {name:'1-1',checked:false}
    ]
  },
  {name:'2',checked:false},
  {
    name:'3',
    checked:false,
    children:[
      {
        name:'3-1',
        checked:false,
        children:[
          {
            name:'3-1-1',
            checked:false
          }
        ]
      }
    ]
  }
])

</script>

<style scoped>
.active{
  background: skyblue;
}
 .tabs{
  border:1px solid #ccc;
  padding:5px 10px;
  margin: 10px;
 }
</style>